<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="utf-8">
		<!-- 	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no,viewport-fit=cover" /> -->
		<link rel="stylesheet" type="text/css" href="css/sui.css" />
		<link rel="stylesheet" type="text/css" href="css/sui-flex.css" />
		<link rel="stylesheet" type="text/css" href="css/my.css" />
		<link rel="stylesheet" type="text/css" href="index.css" />
		<link rel="stylesheet" type="text/css" href="css/iconfont.css" />
		<script src="./js/iconfont.js"></script>
		<link rel="stylesheet" type="text/css" href="css/animate.min.css" />
		<link rel="stylesheet" type="text/css" href="warning_info.css?version=201902252317" />
		<title></title>
		<style>
			body {
			/* background-color: #203CF4; */
			overflow-x: hidden;
			overflow-y: hidden;
		}
		.sui-list-item:last-child{
			background-image: none;
		}	
		
	</style>

	</head>

	<body>
		<header class="sui-bar sui-bar-nav top-box" style="height: 85px;box-shadow: 0px 2px 1px rgba(0,0,0,0.5)">
			<!-- <a class="sui-btn sui-pull-left" id="sui-back">
				<span class="sui-iconfont sui-icon-left"></span>
			</a> -->
			<div class="sui-title" style="height: 85px; line-height: 85px;">智慧水务系统</div>
			<div class="sui-pull-right" id="sui-back">
				<img src="img/menu.png" id="icon-menu"/>
			</div>
		</header>

		<div class="sui-wrap sui-flex-row back-box " id="datas">

			<!-- <p class="top-info animated fadeInDown">预警数据</p> -->

			<div class="sui-content-padded sui-flex-1 list-box">
				<div class="sui-flex-col sui-flex-middle animated fadeInDown">
					<h1>数据分析列表</h1>
					<div class="tab">
						<span @click="tabSelect(tab)" v-for="tab in tabs" :class="tab == selectTab?'selected':'' ">{{tab}}</span>
					</div>
				</div>
				
				<div class="animated fadeIn">
				<div class="sui-flex-col tab-title">
					<p class="sui-flex-item-2">编号</p>
					<p class="sui-flex-item-3">统计时间</p>
					<p class="sui-flex-item-2">进水总量m³</p>
					<p class="sui-flex-item-2">出水总量m³</p>
					<p class="sui-flex-item-2">进出水差m³</p>
					<p class="sui-flex-item-1">操作</p>
				</div>
				
				<div class="sui-flex-col tab-content" v-for="content in listDatas">
					<p class="sui-flex-item-2 sui-text-center">{{content.id}}</p>
					<p class="sui-flex-item-3">{{content.time}}</p>
					<p class="sui-flex-item-2">{{content.type}}</p>
					<p class="sui-flex-item-2">{{content.content}}</p>
					<p class="sui-flex-item-2">{{content.deal}}</p>
					<p class="sui-flex-item-1 control" >操作</p>
				</div>
				</div>
				

			</div>

			<div class="pagination">
				<ul>
					<li v-if="currentPage > 1" @click="prevPage">
						上一页
					</li>
					<li v-if="currentPage == 1" class="disabled">
						上一页
					</li>
					<li v-for="item in indexs" @click="pageClick(item)" v-bind:class="{'active':currentPage==item}" class="item">
						{{item}}
					</li>
					<li v-if="currentPage!=allPage" @click="nextPage">
						下一页
					</li>
					<li v-if="currentPage==allPage" class="disabled">
						下一页
					</li>
					<li>共<i>{{allPage}}</i>页</li>
				</ul>
			</div>

		</div>


		<script type="application/javascript" src="lib/sui.js"></script>
		<script type="application/javascript" src="js/common.js"></script>
		<script type="application/javascript" src="js/vue.min.js"></script>
		<script type="application/javascript" src="bump_info.js"></script>
		<script type="text/javascript">

		</script>

	</body>

</html>
